{{- block pagination(data) }}
<nav aria-label="Pagination">
  <div class="d-flex flex-column align-items-center justify-content-center">
    {{ if len(data.Pages) > 0 }}
      <!-- Dropdown -->
      <div class="js-required dropup mb-3">
        <button class="custom-btn-neutral-700 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            Go to Page
        </button>
        <ul class="dropdown-menu bg-neutral-700 drop-shadow-lg border border-1 border-neutral-600">
          {{ range data.DropdownPages }}
            {{ if .Number == data.CurrentPage }}
              <li><a class="dropdown-item bg-neutral-500 active" href="{{ .URL }}">{{ .Number }}</a></li>
            {{ else }}
              <li><a class="dropdown-item" href="{{ .URL }}">{{ .Number }}</a></li>
            {{ end }}
          {{ end }}
        </ul>
      </div>

      <!-- Page numbers -->
      <div class="d-flex flex-row align-items-center">
        <!-- Previous page button -->
        {{ if data.HasPrevious }}
          <a class="custom-btn-neutral-700 me-2" href="{{ data.PreviousURL }}">Previous</a>
        {{ else }}
          <button class="custom-btn-neutral-700 me-2" disabled>Previous</button>
        {{ end }}

        <!-- First page and ellipsis (if needed) -->
        {{ if data.Pages[0].Number > 1 }}
          <a class="custom-btn-neutral-700 me-1" href="{{ data.FirstURL }}">1</a>
          {{ if data.Pages[0].Number > 2 }}
            <span class="me-1 text-muted">...</span>
          {{ end }}
        {{ end }}

        <!-- Page numbers -->
        {{ range data.Pages }}
          {{ if .Number == data.CurrentPage }}
            <button class="custom-btn bg-neutral-500 text-white me-1">{{ .Number }}</button>
          {{ else }}
            <a class="custom-btn-neutral-700 me-1" href="{{ .URL }}">{{ .Number }}</a>
          {{ end }}
        {{ end }}

        <!-- Last page and ellipsis (if needed) -->
        {{ if data.HasMaxPage }}
          {{ if data.LastPage < data.MaxPage }}
            {{ if data.LastPage < data.MaxPage - 1 }}
              <span class="me-1 text-muted">...</span>
            {{ end }}
            <a class="custom-btn-neutral-700 me-1" href="{{ data.LastURL }}">{{ data.MaxPage }}</a>
          {{ end }}
        {{ end }}

        <!-- Next page button -->
        {{ if data.HasNext }}
          <a class="custom-btn-neutral-700 ms-1" href="{{ data.NextURL }}">Next</a>
        {{ else }}
          <button class="custom-btn-neutral-700 ms-1" disabled>Next</button>
        {{ end }}
      </div>
    {{ else }}
      <div class="alert alert-dark w-auto my-5" role="alert">
        <p class="text-center mb-0">
          No items to display.
        </p>
      </div>
    {{ end }}
  </div>
</nav>
{{- end }}
